<template>
 <div style="height: 220px">
   <div class="container" style="margin-top: 20px">
     <Icon type="md-search" size="64" color="lightpink"/>
     <p class="word">音乐搜索查询</p>
   </div>
   <div class="container" style="margin-top: 15px">
     <label>
       <Input v-model="musicName" placeholder="请输入作品名称..." clearable class="input"/>
       <p class="mar-left-10 light-grey">如：《晴天》</p>
     </label>
     <label>
       <Input v-model="lyricist" placeholder="请输入词作者..." clearable class="input"/>
       <p class="mar-left-10 light-grey">如：周杰伦</p>
     </label>
     <label>
       <Input v-model="composer" placeholder="请输入曲作者..." clearable class="input"/>
       <p class="mar-left-10 light-grey">如：周杰伦</p>
     </label>
     <label>
       <Input v-model="singer" placeholder="请输入演唱者..." clearable class="input"/>
       <p class="mar-left-10 light-grey">如：周杰伦</p>
     </label>
     <Button icon="ios-search" @click="search" class="search">搜索</Button>
   </div>
 </div>
</template>

<script>
export default {
  name: 'MusicSearch',
  data () {
    return {
      musicName: '',
      lyricist: '',
      composer: '',
      singer: ''
    }
  },
  methods: {
    search () {
      this.$router.push({
        path: '/copyright_search',
        query: {
          flag: true,
          musicName: this.musicName,
          lyricist: this.lyricist,
          composer: this.composer,
          singer: this.singer
        }
      })
    }
  }
}
</script>

<style scoped>
.container{
  display: flex;
  justify-content: center;
}
.word{
 font-size: 40px;
  color: lightpink;
}
.input {
  width: 250px;
  background-color: lightpink;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 30px;
}
.search{
  color: #ff5372;
  border-color: lightpink;
}
</style>
